<template>
  <van-swipe
    id="banner-swipe-wrapper"
    class="banner-box"
    :autoplay="bannerAutoplay"
    indicator-color="white"
    @change="onSwipeChange"
  >
    <van-swipe-item
      v-for="banner in bannerList"
      :key="banner.id"
      @click="go2BannerLanding(banner, index)"
    >
      <img :src="resizeImg(banner.imgUrl)" alt="" />
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { getQueryParams, formatImgUrl } from '@/utils/util';

export default {
  name: 'CommonBanner',
  props: {
    bannerList: {
      type: Array,
      default: () => []
    },
    bannerAutoplay: {
      type: Number,
      default: 4000
    },
    fromPage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      curIndex: 0 // 记录轮播当前下标，暂时没用
    };
  },
  methods: {
    resizeImg(url) {
      return formatImgUrl(url, 375, null);
    },
    onSwipeChange() {
      // todo
    },
    go2BannerLanding(bannerObj) {
      const { hrefType, hrefUrl, name } = bannerObj;
      switch (hrefType) {
        case 0: {
          // 落地页
          // 获取链接的域名
          const urlArr = hrefUrl.split('#');
          let domain = urlArr[0] || '';
          domain = domain.slice(0, domain.length - 1);

          // 获取链接的跳转path
          let path = '';
          if (urlArr.length === 2) {
            const jumpUrl = urlArr[1].split('?');
            path = jumpUrl[0].slice(1);
          }
          // 获取链接上的参数
          const params = getQueryParams(hrefUrl);

          const domainList = process.env.VUE_APP_DOMAIN_LIST.split(',');
          if (domainList.includes(domain)) {
            // 内部链接处理
            if (
              (this.fromPage === 'productDetail' && path === 'productDetail') ||
              (this.fromPage === 'brand' && path === 'brand')
            ) {
              this.$router.replace({
                path,
                query: {
                  ...params,
                  shopId: ''
                }
              });
            } else {
              this.$router.push({
                path,
                query: {
                  ...params,
                  shopId: ''
                }
              });
            }
          } else {
            // 外部链接处理
            window.location.href = hrefUrl;
          }
          break;
        }
        case 1: // 图片
          this.$router.push({
            path: 'banner-image',
            query: {
              name,
              imgUrl: hrefUrl
            }
          });
          break;
        case 2: // 活动
          if (this.fromPage === 'brand') {
            // 活动页跳活动页
            const { activityNo } = this.$route.query;
            if (activityNo === hrefUrl) {
              window.scrollTo(0, 0);
            } else {
              this.$router.replace({
                path: 'brand',
                query: {
                  activityNo: hrefUrl
                }
              });
            }
          } else {
            this.$router.push({
              path: 'brand',
              query: {
                activityNo: hrefUrl
              }
            });
          }
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.banner-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
